<template>
  <div class="text-input">
    <input-plane :label="label" :color="color">
      <div class="main">
        <div class="inp">
          <input :placeholder="desc" @blur.prevent="autoScroll" v-model="val" :disabled="disable" type="text" class="txt">
        </div>
      </div>
    </input-plane>
  </div>
</template>

<script>
import inputPlane from '../../components/base/input-plane'
export default {
  props: {
    disable: Boolean,
    label: String,
    color: String,
    value: null,
    desc: String
  },
  methods: {
    autoScroll () {
      const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
      window.scrollTo(0, Math.max(scrollHeight - 1, 0))
    }
  },
  computed: {
    val: {
      get: function () {
        return this.value
      },
      set: function (newVal) {
        this.$emit('input', newVal)
      }
    }
  },
  components: {
    inputPlane
  }
}
</script>

<style scoped lang="stylus">
  ::-webkit-input-placeholder { /* WebKit browsers */
    color #B9B7C0
    dpr-font(12px)
  }
  .main
    position absolute
    top  0
    left 0
    right 0
    bottom 0
    padding 8px 10px
    .inp
      opacity: 1;
      padding-left 10px
      height 100%
      color #55545d
      dpr-font(16px)
      border 1Px solid #E6E5E6
      .txt
        color #55545d
        width 100%
        height 100%
        border none
        outline none
        background none
        &:disabled
          -webkit-text-fill-color: #55545d;
          -webkit-opacity: 1;
          color: #55545d;
</style>
